<template>
  <div>
    <!-- <upload v-show="false" @upload-success="uploadSuccess" /> -->
    <quill-editor
      ref="myQuillEditor"
      class="que-editor"
      :value="value"
      :options="editorOption"
      @blur="onEditorBlur($event)"
      @focus="onEditorFocus($event)"
      @change="onEditorChange($event)"
    />
  </div>
</template>
<script>
import { quillEditor, Quill } from 'vue-quill-editor'; // 调用编辑器
import { container, ImageExtend, QuillWatch } from 'quill-image-paste-module';
import 'quill/dist/quill.core.css';
import 'quill/dist/quill.snow.css';
import 'quill/dist/quill.bubble.css';
// import upload from "./upload.vue";
import { mapState } from 'vuex';
Quill.register('modules/ImageExtend', ImageExtend);
// import { setToken } from "./libs/index";
import store from '@store/index';
import { APP_CONFIG } from '@/config';
import { ImageDrop } from 'quill-image-drop-module'; // 图片拖动插件
import ImageResize from 'quill-image-resize-module'; // 图片设置大小插件
Quill.register('modules/imageDrop', ImageDrop); // 图片拖动插件
Quill.register('modules/imageResize', ImageResize); // 图片设置大小插件

let _that = null;
function setToken() {
  return (xhr) => {
    const token = store.state.user.token;
    xhr.setRequestHeader('Set-Cookie', token);
  };
}
function getUrl() {
  return (res) => {
    console.log(_that.formData);
    const url = store.state.url;
    // .akeyId = res.data.otherKeyId;
    return url + res.data.path;
  };
}

function getApiUrl() {
  return `${APP_CONFIG.API_HOST}/file/uploadOtherImg`;
}

export default {
  components: {
    quillEditor
  },
  props: {
    value: {
      type: String,
      default: ''
    }
  },
  computed: {
    ...mapState({
      url: (state) => state.url,
      token: (state) => state.user.token
    }),
    editor() {
      return this.$refs.myQuillEditor.quill;
    }
  },
  data() {
    return {
      editorOption: {
        modules: {
          imageDrop: true,
          imageResize: {
            displayStyles: {
              backgroundColor: 'black',
              border: 'none',
              color: 'white'
            },
            modules: ['Resize', 'DisplaySize', 'Toolbar']
          },
          ImageExtend: {
            loading: true, // 可选参数 是否显示上传进度和提示语
            name: 'file', // 图片参数名
            size: 3, // 可选参数 图片大小，单位为M，1M = 1024kb
            action: getApiUrl(), // 服务器地址, 如果action为空，则采用base64插入图片
            // response 为一个函数用来获取服务器返回的具体图片地址
            // 例如服务器返回{code: 200; data:{ url: 'baidu.com'}}
            // 则 return res.data.url
            response: getUrl(),
            headers: setToken(), // 可选参数 设置请求头部
            sizeError: () => {}, // 图片超过大小的回调
            start: () => {}, // 可选参数 自定义开始上传触发事件
            end: () => {}, // 可选参数 自定义上传结束触发的事件，无论成功或者失败
            error: () => {}, // 可选参数 上传失败触发的事件
            success: () => {}, // 可选参数  上传成功触发的事件
            change: (xhr, formData) => {} // 可选参数 选择图片触发，也可用来设置头部，但比headers多了一个参数，可设置formData
          },
          toolbar: {
            container: container,

            handlers: {
              image(params) {
                QuillWatch.emit(this.quill.id);
              },
              upload(value) {
                // 编辑器-上传文件
                if (value) {
                  // document.querySelector(".uploadFile input").click();
                }
              }
            }
          }
        }
      }
    };
  },
  created() {
    _that = this;
  },
  updated() {},
  methods: {
    uploadSuccess(e) {
      console.log(e);
      const { path } = e;
      const { url } = this.$store.state;
      console.log();
      const quill = this.$refs.myQuillEditor.quill;
      // 获取光标所在位置
      const length = quill.getSelection().index;
      // 插入图片，res为服务器返回的图片链接地址
      quill.insertEmbed(length, 'image', url + path);
      // 调整光标到最后
      quill.setSelection(length + 1);
    },
    onEditorReady(editor) {
      // 准备编辑器
    },
    onEditorBlur() {}, // 失去焦点事件
    onEditorFocus() {}, // 获得焦点事件
    onEditorChange(value) {
      console.log(value);
      this.$emit('input', value.html);
    } // 内容改变事件
  }
};
</script>

 <style lang="scss" scoped>
.que-editor {
  min-width: 800px;
  // height: 600px;
}

::v-deep .ql-container {
  height: 600px !important;
}

.introduce {
  font-size: 14px;
  color: #606266;
  font-weight: 700;
  margin-bottom: 20px;
}
</style>
